<template>
  <div class="layout-container">

    <MyTopMiddleBottomLayout>
      <template v-slot:top>
        <div class="form_wrap">
          <MyFrom :queryTitles="thisData.queryTitles" :have_btn="true" :queryParams="thisData.queryParams" @search_ev="search_fn"
            @reset_ev="reset_fn">
          <template #btns>
            <el-button @click="add_btn" type="success" plain>新增</el-button>
          </template>
          </MyFrom>
        </div>
      </template>
      <template #middle>
        <div class="table_wrap">
          <MyListComponent :tableData="thisData.tableData" :tableTitle="thisData.tableTitle" :have_index="true"
            :have_selec="true" :have_opration="true" :have_page="true" ref="myTable_ref" @getInfolist_ev="getInfolist_fn">
            <template #oprate="{scope}">
              <el-link @click="edit_btn(scope.row)" type="primary" class="left_span">编辑</el-link>
              
              <el-popconfirm title="确认删除？" @confirm="confirm_del_fn(scope.row)">
                <template #reference>
                  <el-link type="danger">删除</el-link>
                </template>
              </el-popconfirm>
            </template>
          </MyListComponent>
        </div>
      </template>
      <template #bottom>
      </template>
    </MyTopMiddleBottomLayout>

    <el-dialog
      v-model="addDialog_visible"
      title="添加商品"
      width="500"
    >
      <div>
        <MyFrom :queryTitles="thisData.queryTitles" :have_btn="false" :queryParams="thisData.queryParams" @search_ev="search_fn"
          @reset_ev="reset_fn">
        <template #btns>
          <el-button @click="add_btn" type="success" plain>新增</el-button>
        </template>
        </MyFrom>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>

import { my_$message } from '@/utils/myUtils.ts'

import { api_get_goods, delete_goodsById } from '@/api/goods.ts'

import { goodsManagerTableTitle } from '@/components/utils/index.js'

import { defineAsyncComponent, ref, reactive, nextTick, getCurrentInstance } from 'vue'
const MyTopMiddleBottomLayout = defineAsyncComponent(() => {
  return import('@/components/MyTopMiddleBottomLayout/index.vue')
})
const MyFrom = defineAsyncComponent(() => {
  return import('@/components/MyForm/index.vue')
})

const MyListComponent = defineAsyncComponent(() => {
  return import('@/components/MyListComponent/index.vue')
})

interface Goods {
  date: string;
  name: string;
  address: string;
}

const my_vm = getCurrentInstance()

let addDialog_visible = ref(false)

const myTable_ref:any = ref(null)

const thisData = reactive({
  tableData: [],
  tableTitle: goodsManagerTableTitle,

  queryParams: {
    goodsName: ''
  },
  queryTitles: [
    {
      label: '名称',
      prop: 'goodsName',
      type: 'text'
    }
  ]
})


// 获取商品数据
function getInfolist_fn() {
  nextTick(()=>{
    let params = {
      pageIndex: myTable_ref.value.pageObj.pageIndex,
      pageSize: myTable_ref.value.pageObj.pageSize,
      goodsName: thisData.queryParams.goodsName
    }
    api_get_goods(params).then((res: any) => {
      thisData.tableData = res.value
      nextTick(() => {
        myTable_ref.value.change_total(res.total)
      })
    }).catch((err) => {
      console.log('商品获取失败： ', err)
    })
  })
}

// 新增商品
function add_btn() {
  addDialog_visible.value = true
}

// 查询按钮
function search_fn() {
  getInfolist_fn()
}


// 重置按钮
function reset_fn() {
  thisData.queryParams.goodsName = ''
  getInfolist_fn()
}

// 编辑按钮
function edit_btn(item) {
  console.log("11111", item)
  
  my_$message(my_vm , '编辑成功')
}

// 删除按钮
function confirm_del_fn(item) {
  let params = {
    id: item.id
  }
  delete_goodsById(params).then((res)=>{
    my_$message(my_vm , '删除成功')
    getInfolist_fn()
  }).catch((err)=>{
  })
}


</script>

<style lang="scss" scoped>
.layout-container {
  height: -webkit-fill-available;
  // border: 1px solid blue;

  display: flex;
  flex-direction: column;

  .table_wrap {
    flex: 1;
    overflow: auto;
  }
}

.left_span {
  margin-right: 10px;
}
</style>